<template>
  <div class="customer-main">
    <Balance
      :showTitle="true"
      :showColumn="false"
      :show-date="false"
      search-placeholder="客户搜索"
      :title="title"
    >
      <template #header>
        <div class="header">
          <div  class="button thumb" >新增分类&nbsp;+</div>
          <div class="button thumb"  @click="addCus">新增客户&nbsp;+</div>
          <div class="button thumb" @click="downLoad">净尺寸导入</div>
          <div
            class="button thumb"
            @click="
              () => aDownLoad(publicUrl(`/53041671002693847.xlsx`), '模板')
            "
          >
            模板导出
          </div>
        </div>
      </template>
    </Balance>

    <div class="content">
      <div class="menu">
        <div
          :class="[
            'menu-part',
            'thumb',
            item.tag_id === tag_id ? `sel` : `nosel`,
          ]"
          @click="() => (tag_id = item.tag_id)"
          v-for="item in menuList"
        >
          {{ item.tag_name }}
        </div>
      </div>
      <div class="table">
        <Table
          :topCss="{
            background: 'white',
            height: '.3042rem',
            fontSize: '.0893rem',
          }"
          :tdCss="{
            fontSize: '.07rem',
            padding: '.04rem',
          }"
          :lineCss="{
            height: `.2188rem`,
            background: '#f5f8fe',
          }"
          :borderSpacing="`0 .0729rem`"
          :dataSource="customerData"
          :headerFontSize="`600`"
          :column="column"
        >
           <template #operation="{row}">
           <div class="operation">
                  <div  class="button thumb" v-show="showSel" @click="()=>selCustomer(row)">选择</div>
                  <div  class="button thumb" @click="addCus">编辑</div>  
                  <!-- 编辑 -->
                  <Popconfirm :placement="`bottom`" style="font-size: .08rem;">
                  <div class="button thumb del-color">删除</div>
                  </Popconfirm>
           </div>  
          </template>
        </Table>
      </div>
    </div>
  </div>

  <FormDialog ref="formDialog" />
</template>
<script setup lang="ts" name="">
import { ref } from "vue";
import Balance from "@/components/Balance/index.vue";
import getFile from "@/utils/getFile";
import { aDownLoad, publicUrl } from "@/utils/util";
import { toast } from "vue3-toastify";
import Table, { Column } from "@/components/Table";
import { CustomerInfo } from "@/stores/modules/Customer";
import Popconfirm from "@/components/Popconfirm/index.vue";
import FormDialog  from "./Form/index.vue";

//在 @\views\Mtm\Make\components\Customer.vue  也有用到该页面
interface Props{
     title:string;
     showSel:boolean;
}


interface MenuList {
  tag_id: number;
  tag_name: string;
}

interface Customer extends CustomerInfo {
  order_num: number;
  classify:string;
  accruing_amounts: number;
}

withDefaults(defineProps<Props>(),{
  title:'尺码管理',
  showSel:false,
})


const formDialog = ref<InstanceType<typeof FormDialog>>();

const customerData = ref<Array<Customer>>([
    {
      name:'张三',
	  phone:'17325764719',
	  stature:'170',
      classify:'一级分类',
	  weight:'62',
      order_num: 5,
      accruing_amounts: 10000,
    },
    {
      name:'张三',
	  phone:'17325764719',
	  stature:'170',
      classify:'一级分类',
	  weight:'62',
      order_num: 5,
      accruing_amounts: 10000,
    },
    {
      name:'张三',
	  phone:'17325764719',
	  stature:'170',
      classify:'一级分类,二级分类,三级分类,fsfdsffds',
	  weight:'62',
      order_num: 5,
      accruing_amounts: 10000,
    },
]);


const column = ref<Array<Column>>([
  {
    title: "姓名",
    dataKey: "name",
    width: 120,
    align: "center",
  },
  { title: "电话", dataKey: "phone", width: 120, align: "center" },
  {
    title: "身高",
    dataKey: "stature",
    width: 80,
    align: "center",
  },
  {
    title: "体重",
    dataKey: "weight",
    width: 80,
    align: "center",
  },
  {
    title: "分类",
    dataKey: "classify",
    width: 150,
    align: "center",
  },
  {
    title: "下单次数",
    dataKey: "order_num",
    width: 120,
    align: "center",
  },
  {
    title: "累计金额",
    dataKey: "accruing_amounts",
    width: 180,
    align: "center",
  },
  {
    title: "操作",
    dataKey: "operation",
    width: 100,
    align: "center",
    slotName:"operation"
  }
]);

const tag_id = ref<number>(0);

const menuList = ref<Array<MenuList>>([
  {
    tag_id: 1,
    tag_name: "一级分类",
  },
  {
    tag_id: 2,
    tag_name: "二级分类",
  },
  {
    tag_id: 3,
    tag_name: "三级分类",
  },
]);
menuList.value.unshift({
  tag_id: 0,
  tag_name: "全部分类",
});

const downLoad = () => {
  getFile("excel", undefined, {
    successResult: (file: File) => {
      toast.success(`导入成功`);
    },
    errorResult: (msg: string) => toast.error(msg),
  });
};

const addCus = ()=>{
  formDialog.value?.changeVisit(true) 
}

const emits = defineEmits<{
  (event:'selCustomer',item:CustomerInfo):void;
}>()

const selCustomer = (item:CustomerInfo)=>{
  emits("selCustomer",item);
}

</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
